<template>
  <div class="div_search">
    <!--使用原生的input.-->
    <div class="div_middle_search_input">

        <div class="div_search_icon">
          <el-icon :size="25" :color="'#3498db'">
            <Search/>
          </el-icon>
        </div>

        <div class="div_search_input">
          <input class="search_input" placeholder="搜索" type="text" @click="search" >
        </div>
<!--        <div class="div_add_icon">-->
<!--          <el-icon :size="20"><Plus /></el-icon>-->
<!--        </div>-->
    </div>
  </div>
</template>

<script>

import {Search} from '@element-plus/icons'

// 通用的组件.
export default {
  name: "middle_search",
  components: {Search},
  data() {
    return {
      // 要进行查询的值.
      queryKey: "",
      recentQueryFriend: [],
    }
  },
  methods: {
    // 展示最近查询的好友.
    search() {
      // 展示搜索过的好友.
      // 这里只显示一个.
    },
  },
}
</script>

<style scoped>

.div_search {
  width: 100%;
  height: 70px;
  /*border: 1px dashed #16a085;*/
  /*border-bottom: 1px solid #bdc3c7;*/
  border-bottom: 1px solid rgba(189, 195, 199, 0.33);
}


.div_middle_search_input {
  /*border: 1px dashed red;*/
  width: 100%;
  height: 35px;
  /*position: absolute;*/
  /*margin-top: 12px;*/
  padding-top: 12px;
}

/*div.*/
.div_search_input {
  display: inline;
  height: 100%;
  margin-left: 60px;
}

.div_search_icon {
  display: inline-block;
  z-index: 4000;
  position: absolute;
  margin-top: 8px;
  margin-left: 30px;
}

.search_input{
  height: 35px;
  outline: none;
  background: none;
  border-left: 0px;
  border-right: 0px;
  border-top: 1px solid #3498db;
  border-bottom: 1px solid #3498db;
}

/*.div_add_icon{*/
/*  display: inline-block;*/
/*  position: absolute;*/
/*  margin-top: 10px;*/
/*  margin-left: 5px;*/
/*}*/

</style>